<!--HTML-->
<!-- 登陆页面 -->
<template>
  <div>
    <div id="header">
      <p>用户登录</p>
    </div>
    <div id="dl">
      <input
        type="text"
        id="username"
        placeholder="输入账号"
        v-model="username"
        class="zh"
      />
      <span class="hint">{{ nametishi }}</span>
      <input
        type="text"
        id="mypwd"
        placeholder="输入密码"
        v-model="password"
        class="mm"
      />
      <span class="hint">{{ pwdtishi }}</span>
      <mt-button @click="btnlogin" type="primary" size="large" class="button">
        确认登陆
      </mt-button>
    </div>
  </div>
</template>



<!--JavaScript-->
<script>
import { MessageBox } from "mint-ui";
import { mapActions } from "vuex"
export default {
  data() {
    return {
      username: "",
      password: "",
      nametishi: "",
      pwdtishi: "",
    };
  },
  methods: {
    ...mapActions(["ulogin"]),
   async btnlogin() {

     var a = await this.ulogin({
        username:this.username,
        password:this.password
      })
        this.$toast({message:'登录成功',position:'bottom',duration:2000});
        this.$router.push('/')


      // this.ulogin({
      //   username:this.username,
      //   password:this.password
      // }).then(()=>{
      //    this.$toast({message:'登录成功',position:'bottom',duration:2000});
      //    this.$router.push('/')
      // }).catch(err=>{
      //    this.$toast({message:'用户名或密码错误',position:'bottom',duration:2000})
      // })
    },
  },
  watch: {
    // username(){
    //   let reg =  /^\w{6,18}$/
    //     if(reg.test(this.username)!=true){
    //         this.nametishi="账号为11-18位字母或数字！";
    //     }else{
    //       console.log("成功")
    //       this.nametishi=" "
    //     }
    // },
    password() {
      let regs = /^[0-9,a-z,A-Z]{6,12}$/;
      if (regs.test(this.password) != true) {
        this.pwdtishi = "密码为6-12位字母数字混合！";
      } else {
        console.log("成功");
        this.pwdtishi = "";
      }
    },
  },
  mounted() {},
};
</script>


<!--CSS-->
<style scoped>
input {
  padding: 2vh;
  padding-left: 10vw;
  width: 50vw;
  display: block;
  border: 1px rgb(186, 186, 190) solid;
  border-radius: 25px;
  outline: none;
  /* background: url("../assets/个人客户.png"); */
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: 1vh center;
}
.zh,
.mm {
  margin: 0 auto;
  margin-bottom: 2vh;
}
#dl {
  margin-top: 45%;
  text-align: center;
}
.button {
  height: 7vh;
  width: 65vw;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 7vh;
}
p {
  font-size: 25px;
  color: rgb(242, 247, 252);
  line-height: 10vh;
  text-align: center;
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  height: 10vh;
  background-color: rgb(38, 162, 255);
}
.hint {
  color: red;
  font-size: 13px;
  line-height: 10vh;
}
</style>